@charset "UTF-8";
@import "color-framework";
@import "variablae-value-framework";

*{
  margin: 0;
  padding: 0;}

%display{
  display: flex;
  align-items: center;
}

%allot {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

%vertical-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin triangle($value_one,$value_two,$value_three,$color){
  width: 0;
  height: 0;
  border-top: $value_one solid transparent;
  border-left: $value_two solid $color;
  border-bottom: $value_three solid transparent;

}
//朝右边指向三角形

@mixin triangle-x($value_t,$value_l,$value_b,$color){
  width: 0;
  height: 0;
  border-top: $value_t solid $color;
  border-left: $value_l solid transparent;
  border-right: $value_b solid transparent;
}

//朝下方指向三角形


@mixin l-gap($value-gap){

  margin-#{$left}:$value-gap;
  margin-#{$right}:$value-gap ;
}

@mixin  space-between($parallel,$allot,$vertical-center){
  display: $parallel;
  justify-content: $allot;
  align-items: center;

}





@mixin test{
width: 90%;
  height: 79px;
margin: 27px auto;
background-color: white;
}

a{
  text-decoration: none;
  color: $white-color;
}

p{
  text-align: center;
  font-size: 14px;
}

%vertical-center{

  .dot-four:hover {
    background-color: $blue-color;
  }

  .dot-one:hover{
      background-color:$blue-color;
  }


  .dot-two:hover{
    background-color:$blue-color;
  }

  .dot-three:hover{
    background-color:$blue-color;
  }


}

